<template>
  <div>
    <!-- <van-search v-model="value" disabled  shape="round" placeholder="请输入搜索关键词" /> -->
    <van-search
      v-model="value"
      shape="round"
      disabled
      @click="$router.push('/classification/search')"
      placeholder="请输入搜索关键词"
    />
    <transition name="van-slide-right">
      <router-view></router-view>
    </transition>
    <div class="classification_pro">
      <!-- 左侧导航 -->
      <van-sidebar v-model="activeKey" @change="onChange">
        <van-sidebar-item
          :title="v.name"
          v-for="v in categoryList"
          :key="v.id"
        />
      </van-sidebar>
      <!-- 右侧内容 -->
      <div class="zong">
        <van-grid :column-num="3">
          <div class="class_pro">
            <img :src="banner_url" alt="" />
            <p>{{ front_desc }}</p>
            <div class="class_title">
              <h5>{{ name }}</h5>
            </div>
          </div>
          <van-grid-item
            v-for="value in subCategoryList"
            :key="value"
            :icon="value.wap_banner_url"
            :text="value.name"
          />
        </van-grid>
      </div>
    </div>
  </div>
</template>

<script>
import { Toast } from "vant";
import { GetCatalogIndex, GetCatalogCurrent } from "@/request/api";

export default {
  name: "H559Classification",

  components: {},

  directives: {},

  data() {
    return {
      activeKey: 0,
      value: "",
      categoryList: "",
      classid: "1005000",
      currentCategory: "",
      subCategoryList: "",
      front_desc: "",
      banner_url: "",
      name: "",
    };
  },

  mounted() {},

  methods: {
    onChange(key) {
      for (let i = 0; i < this.categoryList.length; i++) {
        if (key == i) {
          // console.log(this.categoryList[i].id)
          GetCatalogCurrent({ id: this.categoryList[i].id }).then((res) => {
            // console.log(res.data.currentCategory);
            Toast.loading({
              message: "加载中...",
              forbidClick: true,
              
            });
            
            //宫格
            this.subCategoryList = res.data.currentCategory.subCategoryList;
            this.front_desc = res.data.currentCategory.front_desc;
            this.banner_url = res.data.currentCategory.banner_url;
            this.name = res.data.currentCategory.name;
            // console.log(this.img_url);
          });
        }
      }
    },
  },
  created() {
    GetCatalogIndex().then((res) => {
      // console.log(res);
      this.categoryList = res.data.categoryList;
      // console.log( this.categoryList);
      this.currentCategory = res.data.currentCategory;
    });
    GetCatalogCurrent({ id: this.classid }).then((res) => {
      // console.log(res.data.currentCategory);
      //宫格
      this.subCategoryList = res.data.currentCategory.subCategoryList;
      this.front_desc = res.data.currentCategory.front_desc;
      this.banner_url = res.data.currentCategory.banner_url;
      this.name = res.data.currentCategory.name;
    });
  },
};
Toast.setDefaultOptions({ duration: 60 });
</script>

<style lang="less" scoped>
</style>